<!-- eslint-disable vue/valid-v-for -->
<template>
  <div class="tp-box">
    <a-drawer
      :visible="vvvvprops.vvvisible"
      :width="vvvvprops.width"
      :loadding="vvvvprops.loadding"
      :closable="vvvvprops.vclosable"
      :destroyOnClose="vvvvprops.vdestroyOnClose"
      @close="handleVillageDetailClose"
    >
      <template #title>
        <div class="title-detail">
          <Tooltip placement="top">
            <h3>{{ getTitle }}</h3>
          </Tooltip>
        </div>
      </template>
      <!-- :scroll="{ x: 1500, y: 600 }" -->
      <Row ref="mapviewRef">
        <Col :span="24">
          <div class="card-container">
            <a-tabs v-model:activeKey="activeKey" type="card" @change="getChangeTab">
              <a-tab-pane key="1" tab="房屋基本信息" forceRender="true">
                <Spin :spinning="loading" />
                <table
                  v-for="item in zchouseInfo"
                  :key="item"
                  :loadding="loadding"
                  class="gridtable"
                >
                <tbody>
                  <tr>
                    <td colspan="4" style="background-color: #fafafa; font-weight: bold"
                      >房主自查房屋基本信息 <span style="float: right;">房屋地址：{{ item.address }}</span></td
                    >
                  </tr>
                  <tr>
                    <td style="background-color: #fafafa">户主姓名</td>
                    <td style="width: 320px">{{ item.hzxm }}</td>
                    <td style="background-color: #fafafa">房屋编号</td>
                    <td>{{ item.fwbh }}</td>
                  </tr>
                  <tr>
                    <td style="background-color: #fafafa">总居住人数(人)</td>
                    <td>{{ item.jzrks }}</td>
                    <td style="background-color: #fafafa">租住人数(人)</td>
                    <td>{{ item.zzrs }}</td>
                  </tr>
                  <tr>
                    <td style="background-color: #fafafa">房屋层数(层)</td>
                    <td>{{ item.cs }}</td>
                    <td style="background-color: #fafafa">房间数量(个)</td>
                    <td>{{ item.fjsl }}</td>
                  </tr>
                  <tr>
                    <td style="background-color: #fafafa">出租房间数量(个)</td>
                    <td>{{ item.jzfjs }}</td>
                    <td style="background-color: #fafafa">安全出口数量 (个)</td>
                    <td>{{ item.jzscxyaqcksl }}</td>
                  </tr>
                  <tr>
                    <td style="background-color: #fafafa">疏散楼梯数量(个)</td>
                    <td>{{ item.jzxyssltsl }}</td>
                    <td style="background-color: #fafafa">房屋建筑面积 (平方米)</td>
                    <td>{{ item.jzscmj }}</td>
                  </tr>
                  <tr>
                    <td style="background-color: #fafafa">窗口防护网、广告牌、铁栅栏数量 (个)</td>
                    <td>{{ item.ckfhwggptzlsl }}</td>
                    <td style="background-color: #fafafa">本房屋居住人员的电动自行车数量(辆)</td>
                    <td>{{ item.bdfwjzrydddzxcsl }}</td>
                  </tr>
                  <tr>
                    <td style="background-color: #fafafa">灭火器数量(个)</td>
                    <td>{{ item.mhqsl }}</td>
                    <td style="background-color: #fafafa">防烟逃生面罩数量(套)</td>
                    <td>{{ item.fytsmz }}</td>
                  </tr>
                  <tr>
                    <td style="background-color: #fafafa">悬挂固定警示标牌数量(张)</td>
                    <td>{{ item.xggdjsbp }}</td>
                    <td style="background-color: #fafafa">房屋简易喷头数量(个)</td>
                    <td>{{ item.jzszlwxdlgybjqs }}</td>
                  </tr>
                  <tr>
                    <td style="background-color: #fafafa">房屋烟感报警器数量(个)</td>
                    <td>{{ item.wdwhjgfjgqsyyrkrgbdj }}</td>
                    <td style="background-color: #fafafa"
                      >屋顶、围护结构、房间隔墙使用易燃可燃夹芯彩钢板搭建</td
                    >
                    <td>{{ item.wdwhjgfjgqsyyrkrgbdj == '1' ? '是' : '否' }}</td>
                  </tr>
                  <tr>
                    <td style="background-color: #fafafa">疏散通道使用易燃可燃材料装修</td>
                    <td>{{ item.sstdsyyrkrclzx == '1' ? '是' : '否' }}</td>
                    <td style="background-color: #fafafa"
                      >供人员疏散的场院、内院、天井设置不利于烟气扩散的顶棚、雨棚等</td
                    >
                    <td>{{ item.gryssdcsszblyyqksddp == '1' ? '是' : '否' }}</td>
                  </tr>
                  <tr>
                    <td style="background-color: #fafafa">除居住外是否存在其他经营业态</td>
                    <td>{{ item.cjzwqtjyytmsg }}</td>
                    <td style="background-color: #fafafa">人员疏散通道是否达标</td>
                    <td>{{ getDb(item) }}</td>
                  </tr>
                  </tbody>
                </table>
                <table v-for="item in houseInfo" :key="item" :loadding="loadding" class="gridtable">
                  <tbody>
                  <tr>
                    <td colspan="2" style="background-color: #fafafa; font-weight: bold"
                    > {{ hourseName }}</td
                    >
                    <td
                      colspan="2"
                      style="background-color: #fafafa; font-weight: bold; text-align: right"
                      ><span style="text-align: right"
                        >所在位置：{{ item.current_location }}（{{ item.longitude }},{{
                          item.latitude
                        }}）</span
                      ><span style="float: right; cursor: pointer" @click="getMap(item)"
                        ><img src="../../../assets/images/postion.png" style="width: 20px" /></span
                    ></td>
                  </tr>
                  <tr>
                    <td style="background-color: #fafafa">户主姓名</td>
                    <td style="width: 320px">{{ item.hzxm }}</td>
                    <td style="background-color: #fafafa">房屋编号</td>
                    <td>{{ item.fwbh }}</td>
                  </tr>
                  <tr>
                    <td style="background-color: #fafafa">总居住人数(人)</td>
                    <td>{{ item.jzrks }}</td>
                    <td style="background-color: #fafafa">租住人数(人)</td>
                    <td>{{ item.zzrs }}</td>
                  </tr>
                  <tr>
                    <td style="background-color: #fafafa">房屋层数(层)</td>
                    <td>{{ item.cs }}</td>
                    <td style="background-color: #fafafa">房间数量(个)</td>
                    <td>{{ item.fjsl }}</td>
                  </tr>
                  <tr>
                    <td style="background-color: #fafafa">出租房间数量(个)</td>
                    <td>{{ item.jzfjs }}</td>
                    <td style="background-color: #fafafa">安全出口数量 (个)</td>
                    <td>{{ item.jzscxyaqcksl }}</td>
                  </tr>
                  <tr>
                    <td style="background-color: #fafafa">疏散楼梯数量(个)</td>
                    <td>{{ item.jzxyssltsl }}</td>
                    <td style="background-color: #fafafa">房屋建筑面积 (平方米)</td>
                    <td>{{ item.jzscmj }}</td>
                  </tr>
                  <tr>
                    <td style="background-color: #fafafa">窗口防护网、广告牌、铁栅栏数量 (个)</td>
                    <td>{{ item.ckfhwggptzlsl }}</td>
                    <td style="background-color: #fafafa">本房屋居住人员的电动自行车数量(辆)</td>
                    <td>{{ item.bdfwjzrydddzxcsl }}</td>
                  </tr>
                  <tr>
                    <td style="background-color: #fafafa">灭火器数量(个)</td>
                    <td>{{ item.mhqsl }}</td>
                    <td style="background-color: #fafafa">防烟逃生面罩数量(套)</td>
                    <td>{{ item.fytsmz }}</td>
                  </tr>
                  <tr>
                    <td style="background-color: #fafafa">悬挂固定警示标牌数量(张)</td>
                    <td>{{ item.xggdjsbp }}</td>
                    <td style="background-color: #fafafa">房屋简易喷头数量(个)</td>
                    <td>{{ item.jzszlwxdlgybjqs }}</td>
                  </tr>
                  <tr>
                    <td style="background-color: #fafafa">房屋烟感报警器数量(个)</td>
                    <td>{{ item.wdwhjgfjgqsyyrkrgbdj }}</td>
                    <td style="background-color: #fafafa"
                      >屋顶、围护结构、房间隔墙使用易燃可燃夹芯彩钢板搭建</td
                    >
                    <td>{{ item.wdwhjgfjgqsyyrkrgbdj == '1' ? '是' : '否' }}</td>
                  </tr>
                  <tr>
                    <td style="background-color: #fafafa">疏散通道使用易燃可燃材料装修</td>
                    <td>{{ item.sstdsyyrkrclzx == '1' ? '是' : '否' }}</td>
                    <td style="background-color: #fafafa"
                      >供人员疏散的场院、内院、天井设置不利于烟气扩散的顶棚、雨棚等</td
                    >
                    <td>{{ item.gryssdcsszblyyqksddp == '1' ? '是' : '否' }}</td>
                  </tr>
                  <tr>
                    <td style="background-color: #fafafa">除居住外是否存在其他经营业态</td>
                    <td>{{ item.cjzwqtjyytmsg }}</td>
                    <td style="background-color: #fafafa">人员疏散通道是否达标</td>
                    <td
                      >{{ getDb(item)
                      }}<span
                        v-show="isHy"
                        style="color: blue; cursor: pointer"
                        @click="showModal(item.sfmzstd_photo)"
                        >(查看照片)</span
                      ></td
                    >
                  </tr>
                  <tr>
                    <td style="background-color: #fafafa">{{ labelname }}</td>
                    <td>{{ item.pcsj }}</td>
                    <td style="background-color: #fafafa">{{ nickname }}</td>
                    <td> {{ item.create_name }}({{ item.unitname }})</td>
                  </tr>
                  </tbody>
                </table>
              </a-tab-pane>
              <a-tab-pane key="2" :tab="tabName" forceRender="true">
                <table v-for="item in houseInfo" :key="item" :loadding="loadding" class="gridtable">
                  <tbody>
                  <tr>
                    <td style="background-color: #fafafa"
                      >电动自行车、电动平衡车及其蓄电池在室内及安全出口处停放、充电</td
                    >
                    <td style="width: 320px" :class="itemtitle">{{
                      getVal(item.use_electric_bicycle)
                    }}</td>
                    <td style="border: 0px">
                      <div
                        style="width: 50px; height: 50px; float: left; margin-right: 10px"
                        v-for="pic in photoInfo.use_electric_bicycle_photo_list"
                        :key="pic"
                      >
                        <a-image
                          :src="pic"
                          style="width: 50px; height: 50px; border-radius: 50px"
                          @click="visible = true"
                        />
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td style="background-color: #fafafa"
                      >在公共区域、租住房间内、地下室使用瓶装液化石油气</td
                    >
                    <td :class="itemtitle">{{ getVal(item.use_bottled_liquefied_gas) }}</td>
                    <td style="border: 0px">
                      <div
                        style="width: 50px; height: 50px; float: left; margin-right: 10px"
                        v-for="pic in photoInfo.use_bottled_liquefied_gas_photo_list"
                        :key="pic"
                      >
                        <a-image
                          :src="pic"
                          style="width: 50px; height: 50px; border-radius: 50px"
                          @click="visible = true"
                        />
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td style="background-color: #fafafa"
                      >疏散走道、楼梯间、安全出口处堆放物品影响人员疏散</td
                    >
                    <td :class="itemtitle">{{ getVal(item.use_stacked_items) }}</td>
                    <td style="border: 0px">
                      <div
                        style="width: 50px; height: 50px; float: left; margin-right: 10px"
                        v-for="pic in photoInfo.use_stacked_items_photo_list"
                        :key="pic"
                      >
                        <a-image
                          :src="pic"
                          style="width: 50px; height: 50px; border-radius: 50px"
                          @click="visible = true"
                        />
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td style="background-color: #fafafa">私拉乱接电线</td>
                    <td :class="itemtitle">{{ getVal(item.slljdx) }}</td>
                    <td style="border: 0px">
                      <div
                        style="width: 50px; height: 50px; float: left; margin-right: 10px"
                        v-for="pic in photoInfo.slljdx_photo_list"
                        :key="pic"
                      >
                        <a-image
                          :src="pic"
                          style="width: 50px; height: 50px; border-radius: 50px"
                          @click="visible = true"
                        />
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td style="background-color: #fafafa">灭火器未保持完好有效</td>
                    <td :class="itemtitle">{{ getVal(item.mhqwbcwhyx) }}</td>
                    <td style="border: 0px">
                      <div
                        style="width: 50px; height: 50px; float: left; margin-right: 10px"
                        v-for="pic in photoInfo.mhqwbcwhyx_photo_list"
                        :key="pic"
                      >
                        <a-image
                          :src="pic"
                          style="width: 50px; height: 50px; border-radius: 50px"
                          @click="visible = true"
                        />
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td style="background-color: #fafafa">简易喷淋灭火系统未保持完好有效</td>
                    <td :class="itemtitle">{{ getVal(item.jyplmhxtwbcwhyx) }}</td>
                    <td style="border: 0px">
                      <div
                        style="width: 50px; height: 50px; float: left; margin-right: 10px"
                        v-for="pic in photoInfo.jyplmhxtwbcwhyx_photo_list"
                        :key="pic"
                      >
                        <a-image
                          :src="pic"
                          style="width: 50px; height: 50px; border-radius: 50px"
                          @click="visible = true"
                        />
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td style="background-color: #fafafa">烟感报警器未保持完好有效</td>
                    <td :class="itemtitle">{{ getVal(item.ygbjwfwhyx) }}</td>
                    <td style="border: 0px">
                      <div
                        style="width: 50px; height: 50px; float: left; margin-right: 10px"
                        v-for="pic in photoInfo.ygbjwfwhyx_photo_list"
                        :key="pic"
                      >
                        <a-image
                          :src="pic"
                          style="width: 50px; height: 50px; border-radius: 50px"
                          @click="visible = true"
                        />
                      </div>
                    </td>
                  </tr>
                  </tbody>
                </table>
              </a-tab-pane>
              <a-tab-pane key="3" tab="整改信息" forceRender="true" style="display: none;">
                <a-descriptions v-for="item in rectification" :key="item" title="" bordered>
                  <a-descriptions-item style="width: 240px" label="隐患类型" :span="3">
                    {{ item.check_name }}
                  </a-descriptions-item>
                  <a-descriptions-item style="width: 240px" label="整改时间" :span="3">
                    {{ item.zg_time }}
                  </a-descriptions-item>
                  <a-descriptions-item style="width: 240px" label="整改人" :span="3">
                    {{ item.zg_name }}
                  </a-descriptions-item>
                  <a-descriptions-item style="width: 240px" label="整改照片" :span="3">
                    <div
                      style="width: 50px; height: 50px; float: left; margin-right: 10px"
                      v-for="pic in picdata"
                      :key="pic"
                    >
                      <a-image
                        :src="pic"
                        style="width: 50px; height: 50px; border-radius: 50px"
                        @click="visible = true"
                      />
                    </div>
                  </a-descriptions-item>
                </a-descriptions>
              </a-tab-pane>
            </a-tabs>
          </div>
        </Col>
      </Row>
      <a-modal v-model:visible="open" title="查看照片" @ok="handleOk" width="800px">
        <a-image-preview-group
          v-for="item in sfmzstd_photolist"
          :key="item"
          style="padding: 10px 20px"
        >
          <a-image :width="200" :height="200" :src="item" style="padding: 10px 20px;" />
        </a-image-preview-group>
      </a-modal>
      <!-- 地图 -->
      <a-modal
        v-model:visible="mapopen"
        :title="hcpostion"
        @ok="handleOk"
        style="width: 1200px; height: 800px"
      >
        <div
          id="map"
          class="map-container"
          style="border: 1px solid #409eff; border-radius: 4px; padding: 10px"
        ></div>
      </a-modal>
    </a-drawer>
  </div>
</template>
<script setup lang="ts">
  import { Tooltip, Row, Col, Spin } from 'ant-design-vue';
  import { ref, computed, onMounted, watch } from 'vue';
  import { nextTick } from 'vue'; // 添加这行导入
  import Map from 'ol/Map';
  import View from 'ol/View';
  import TileLayer from 'ol/layer/Tile';
  import XYZ from 'ol/source/XYZ';
  import { fromLonLat,transform } from 'ol/proj';
  import { defaults as defaultControls, ScaleLine } from 'ol/control';
  import VectorLayer from 'ol/layer/Vector';
  import VectorSource from 'ol/source/Vector';
  import Feature from 'ol/Feature';
  import Point from 'ol/geom/Point';
  import { Icon, Style } from 'ol/style';
  import { message } from 'ant-design-vue';
  import {
    housrDetailApi,
    housrApi,
    getCheckHousrDetailApi,
    getHcHousrDetailApi,
  } from '/@/api/demo/table';
  const visible = ref(false);
  const loading = ref(false); //加载
  const open = ref<boolean>(false);
  const mapopen = ref<boolean>(false); 
  const isVectorLayerVisible = ref<boolean>(false);
  // 默认传过来的值q
  const vvvvprops = defineProps({
    vvvisible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '',
    },
    width: {
      type: Number,
      default: 256,
    },
    vclosable: {
      type: Boolean,
      default: true,
    },
    loadding: {
      type: Boolean,
      default: true,
    },
    data: {
      type: Array,
      default: () => [],
    },
    detailParams: {
      type: Object,
      default: () => {},
    },
    vvvvcurrentXzqdmname: {
      type: String,
      default: '',
    },
    currentTitle: {
      type: Object,
      default: () => {},
    },
    wscolsList: {
      type: Array,
      default: () => [{ wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }],
    },
    vdestroyOnClose: {
      type: Boolean,
      default: true,
    },
    onClose: {
      type: Function as PropType<() => void>,
      default: () => {},
    },
    pid: {
      type: String,
      default: '',
    },
    type: {
      type: String,
      default: '',
    },
    hid: {
      type: String,
      default: '',
    },
    chk: {
      type: Boolean,
      default: true,
    },
    id: {
      type: String,
      default: '',
    },
  });
  let houseInfo = ref<any>([]);
  let zchouseInfo = ref<any>([]);
  let sfmzstd_photolist = ref<any>([]);
  let photoInfo = ref<any>([]);
  let rectification = ref<any>({});
  let picdata = ref<any>([]);
  let activeKey = ref('1');
  let itemtitle = ref('');
  let hourseName = ref('');
  let hcpostion = ref('核验所在位置');
  const unitname = ref('消防支队');
  const vvvvisible = ref(true);
  const isHy = ref(false);
  const labelname = ref('自查时间');
  const nickname = ref('');
  const tabName = ref('')
  //const singlabel = ref('');
  const getTitle = computed(() => {
    var title_name = '';
    if (vvvvprops.currentTitle.category == '自查') {
      title_name = '自查';
      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
      labelname.value = '自查时间';
      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
      nickname.value = '户主姓名';
      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
      tabName.value = '隐患信息';
      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
      hourseName.value = '房主自查房屋基本信息';
      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
      isHy.value = false;
    } else if (vvvvprops.currentTitle.category == '检查') {
      title_name = '检查';
      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
      labelname.value = '检查时间';
      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
      nickname.value = '检查人';
      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
      tabName.value = '检查隐患';
      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
      hourseName.value = '检查房屋基本信息';
      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
      isHy.value = true;
    } else if (vvvvprops.currentTitle.category == '乡镇核验') {
      title_name = '乡镇核验';
      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
      labelname.value = '核验时间';
      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
      nickname.value = '核验人';
      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
      tabName.value = '核验隐患';
      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
      hourseName.value = '核验房屋基本信息';
      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
      isHy.value = true;
    } else if (vvvvprops.currentTitle.category == '区级核验') {
      title_name = '区级核验';
      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
      labelname.value = '核验时间';
      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
      nickname.value = '核验人';
      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
      tabName.value = '核验隐患';
      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
      hourseName.value = '核验房屋基本信息';
      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
      isHy.value = true;
    } else if (vvvvprops.currentTitle.category == '市级核验') {
      title_name = '市级核验';
      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
      labelname.value = '核验时间';
      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
      nickname.value = '核验人';
      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
      tabName.value = '核验隐患';
      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
      hourseName.value = '核验房屋基本信息';
      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
      isHy.value = true;
    }

    let str = `${vvvvprops.currentTitle.title}的` + title_name + `情况`;
    if (str.length > 50) {
      str = str.substring(0, 50) + '...';
    }
    // eslint-disable-next-line vue/no-side-effects-in-computed-properties
    loading.value = true;
    if (vvvvprops.currentTitle.category == '自查') {
      getDataInfo(vvvvprops.currentTitle.id);
    } else if (vvvvprops.currentTitle.category == '检查') {
      getHourseInfo(vvvvprops.currentTitle.fwbh);
      getCheckHousData(vvvvprops.currentTitle.id);
    } else if (vvvvprops.currentTitle.category == '乡镇核验') {
      getHourseInfo(vvvvprops.currentTitle.fwbh);
      getJzHousData(vvvvprops.currentTitle.id);
    } else if (vvvvprops.currentTitle.category == '区级核验') {
      getHourseInfo(vvvvprops.currentTitle.fwbh);
      getQjHousData(vvvvprops.currentTitle.id);
    } else if (vvvvprops.currentTitle.category == '市级核验') {
      getHourseInfo(vvvvprops.currentTitle.fwbh);
      getSjHousData(vvvvprops.currentTitle.id);
    }
    // eslint-disable-next-line vue/no-async-in-computed-properties
    setTimeout(() => {
      loading.value = false;
    }, 3000);
    return str;
  });
  const getDataInfo = async (strid: any) => {
    housrDetailApi({ id: strid })
      .then((d) => {
        houseInfo.value = d.buildingPcYhLogDetailDtoList;
        photoInfo.value = d.photoList[0];
        console.log('隐患信息', photoInfo.value);
        rectification.value = d.rectificationYhList;
        //getImgList();
        let imgs = rectification.value[0];
        if (imgs != null) {
          const list: any = imgs.zg_zp;
          const piclist = list.replace(/\[|]/g, '').replace(/\"/g, '');
          if (piclist != '') {
            if (piclist.includes(',')) {
              picdata.value = imgs.zg_zp.split(',');
            } else {
              picdata.value.push(piclist + '?t=' + new Date());
            }
          }
        }
      })
      .catch(() => {
        //error(err.message || '获取房屋信息失败');
      });
  };
  const getHourseInfo = async (strid: any) => {
    housrApi({ fwbh: strid })
      .then((d) => {
        zchouseInfo.value = d.buildingPcYhLogDetailDtoList;
      })
      .catch(() => {
        //error(err.message || '获取房屋信息失败');
      });
  };
  const getCheckHousData = async (id) => {
    getCheckHousrDetailApi({ id: id })
      .then((d) => {
        houseInfo.value = d.buildingPcYhLogDetailDtoList;
        photoInfo.value = d.photoList[0];
        console.log('隐患信息', photoInfo.value);
        rectification.value = d.rectificationYhList;
        //getImgList();
        let imgs = rectification.value[0];
        if (imgs != null) {
          const list: any = imgs.zg_zp;
          const piclist = list.replace(/\[|]/g, '').replace(/\"/g, '');
          if (piclist != '') {
            if (piclist.includes(',')) {
              picdata.value = imgs.zg_zp.split(',');
            } else {
              picdata.value.push(piclist + '?t=' + new Date());
            }
          }
        }
        //getImgList();
      })
      .catch(() => {
        //error(err.message || '获取房屋信息失败');
      });
  };
  const getJzHousData = async (strid: any) => {
    console.log('街镇', strid);
    getHcHousrDetailApi({ id: strid })
      .then((d) => {
        houseInfo.value = d.buildingPcYhLogDetailDtoList;
        photoInfo.value = d.photoList[0];
        console.log('隐患信息', photoInfo.value);
        rectification.value = d.rectificationYhList;
        //getImgList();
        let imgs = rectification.value[0];
        if (imgs != null) {
          const list: any = imgs.zg_zp;
          const piclist = list.replace(/\[|]/g, '').replace(/\"/g, '');
          if (piclist != '') {
            if (piclist.includes(',')) {
              picdata.value = imgs.zg_zp.split(',');
            } else {
              picdata.value.push(piclist + '?t=' + new Date());
            }
          }
        }
        //getImgList();
      })
      .catch(() => {
        //error(err.message || '获取房屋信息失败');
      });
  };
  const getQjHousData = async (strid: any) => {
    console.log('区级', strid);
    getHcHousrDetailApi({ id: strid })
      .then((d) => {
        houseInfo.value = d.buildingPcYhLogDetailDtoList;
        photoInfo.value = d.photoList[0];
        console.log('隐患信息', photoInfo.value);
        rectification.value = d.rectificationYhList;
        //getImgList();
        let imgs = rectification.value[0];
        if (imgs != null) {
          const list: any = imgs.zg_zp;
          const piclist = list.replace(/\[|]/g, '').replace(/\"/g, '');
          if (piclist != '') {
            if (piclist.includes(',')) {
              picdata.value = imgs.zg_zp.split(',');
            } else {
              picdata.value.push(piclist + '?t=' + new Date());
            }
          }
        }
        //getImgList();
      })
      .catch(() => {
        //error(err.message || '获取房屋信息失败');
      });
  };
  const getSjHousData = async (strid: any) => {
    console.log('市级', strid);
    getHcHousrDetailApi({ id: strid })
      .then((d) => {
        houseInfo.value = d.buildingPcYhLogDetailDtoList;
        photoInfo.value = d.photoList[0];
        console.log('隐患信息', photoInfo.value);
        rectification.value = d.rectificationYhList;
        //getImgList();
        let imgs = rectification.value[0];
        if (imgs != null) {
          const list: any = imgs.zg_zp;
          const piclist = list.replace(/\[|]/g, '').replace(/\"/g, '');
          if (piclist != '') {
            if (piclist.includes(',')) {
              picdata.value = imgs.zg_zp.split(',');
            } else {
              picdata.value.push(piclist + '?t=' + new Date());
            }
          }
        }
        //getImgList();
      })
      .catch(() => {
        //error(err.message || '获取房屋信息失败');
      });
  };
  const getVal = (val) => {
    var t = '';

    if (val == '1') {
      t = '是';
      itemtitle.value = 'ant-tag-red';
    } else if (val == '2') {
      t = '不涉及';
      itemtitle.value = 'ant-tag-green';
    } else if (val == '0') {
      t = '否';
      itemtitle.value = 'ant-tag-green';
    }
    return t;
  };
  const getChangeTab = () => {
    if (vvvvprops.currentTitle.category == '自查') {
      getDataInfo(vvvvprops.currentTitle.id);
    } else if (vvvvprops.currentTitle.category == '检查') {
      getHourseInfo(vvvvprops.currentTitle.fwbh);
      getCheckHousData(vvvvprops.currentTitle.id);
    } else if (vvvvprops.currentTitle.category == '乡镇核验') {
      getHourseInfo(vvvvprops.currentTitle.fwbh);
      getJzHousData(vvvvprops.currentTitle.id);
    } else if (vvvvprops.currentTitle.category == '区级核验') {
      getHourseInfo(vvvvprops.currentTitle.fwbh);
      getQjHousData(vvvvprops.currentTitle.id);
    } else if (vvvvprops.currentTitle.category == '市级核验') {
      getHourseInfo(vvvvprops.currentTitle.fwbh);
      getSjHousData(vvvvprops.currentTitle.id);
    }
    console.log('当前选中的标签的 key:', activeKey.value);
  };
  const showModal = (sfmzstd_photo) => {
    console.log('&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&', sfmzstd_photo);

    if (sfmzstd_photo != null) {
      open.value = true;
      const list: any = sfmzstd_photo;
      const parsedList = JSON.parse(list);
      sfmzstd_photolist.value = parsedList;
    } else {
      message.error('暂无照片');
    }
    console.log(sfmzstd_photolist);
  };

  const handleOk = (e: MouseEvent) => {
    console.log(e);
    open.value = false;
    mapopen.value = false;
  };
  const gaodeKey = '02595690e7f5d871e9bff4ea663a7cd5';
  const currentMapType = ref('vector');
  let map;
  const getMap = (item) => {
    if (
      item.longitude != 'null' &&
      item.latitude != 'null' &&
      item.longitude != null &&
      item.latitude != null)
    {
      mapopen.value = true;
      hcpostion.value = '核验所在位置：' + item.address;
      console.log('item',item)
      nextTick(() => {
        // 1. 确保DOM元素存在
        const container = document.getElementById('map');
        if (!container) {
          console.error('地图容器未找到');
          return;
        }
        // 2. 转换坐标系 (高德使用GCJ-02)
        const center = transform([item.longitude, item.latitude], 'EPSG:4326', 'EPSG:3857');
        // 3. 创建地图实例
        map = new Map({
          target: container, // 直接传递DOM元素
          controls: defaultControls().extend([new ScaleLine()]),
          view: new View({
            center: center,
            zoom: 10,
            maxZoom: 18,
          }),
        });

        // 4. 添加影像地图 (带跨域属性)
        const imgLayer = new TileLayer({
          source: new XYZ({
            url: `https://webst0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=6&key=${gaodeKey}`,
            tileSize: 256,
            subdomains: ['1', '2', '3', '4'],
            crossOrigin: 'anonymous', // 重要：解决跨域问题
          }),
        });
        // 影像注记
        const imgLayerZj = new TileLayer({
          source: new XYZ({
            url: `https://webst0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8&key=${gaodeKey}`,
            tileSize: 256,
            subdomains: ['1', '2', '3', '4'],
            crossOrigin: 'anonymous', // 重要：解决跨域问题
          }),
        });
        // 5. 添加标记图层
        const markerLayer = new VectorLayer({
          source: new VectorSource(),
        });

        map.addLayer(imgLayer);
        map.addLayer(imgLayerZj);
        map.addLayer(markerLayer);

        // 6. 添加标记
        addMarker([item.longitude, item.latitude], '位置标记');
        centerToCoordinate(item.longitude, item.latitude);
        // 7. 确保地图尺寸正确
        setTimeout(() => {
          map.updateSize();
          map.getView().setCenter(center); // 重新设置中心点
        }, 100);
      });
    } else {
      message.error('暂无位置信息');
    }
  };
  // 添加标记方法
  function addMarker(coords, title) {
    const marker = new Feature({
      geometry: new Point(transform(coords, 'EPSG:4326', 'EPSG:3857')),
    });

    marker.setStyle(new Style({
        image: new Icon({
          src: 'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
          scale: 0.8,
          anchor: [0.5, 1],
          crossOrigin: 'anonymous',
        }),
      }),
    );

    map.getLayers().forEach((layer) => {
      if (layer instanceof VectorLayer) {
        layer.getSource().addFeature(marker);
      }
    });
  };
  // 定位到指定经纬度
  const centerToCoordinate = (longitude, latitude, zoom = 17) => {
    if (map) {
      const view = map.getView();
      view.setCenter(fromLonLat([longitude, latitude]));
      view.setZoom(zoom);
    }
  };
  const getDb = (item) => {
    var lable_name = '';
    if (vvvvprops.currentTitle.category == '自查') {
      lable_name = item.tdsfdb;
    } else {
      lable_name = item.jsrysstd;
    } 
    return lable_name;
  };
  //  调用 父组件传过来的方法
  const emit = defineEmits(['close']);
  const handleVillageDetailClose = () => {
    vvvvisible.value = false;
    emit('close');
    picdata.value = [];
    houseInfo.value = [];
    photoInfo.value = [];
    activeKey.value = '1';
    console.log('************8vvisible*************', vvvvisible.value);
  };
  onMounted(() => {
    console.log('******详细*初始化*****', vvvvprops);
    //  getDataInfo(vvvvprops.vvvvcurrentTitle.id,);
  });
</script>
<style lang="less" scoped>
  .tp-box {
    height: 100%;
  }
  .title-detail {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .pagination {
    margin-top: 5px;
    display: flex;
    justify-content: flex-end;
  }
</style>
<style>
  .ant-descriptions-bordered .ant-descriptions-item-label,
  .ant-descriptions-bordered .ant-descriptions-item-content {
    padding: 10px 10px !important;
  }
</style>
<style>
 
  table.gridtable {
    font-family: verdana, arial, sans-serif;
    font-size: 11px;
    color: #333333;
    border-width: 1px;
    border-color: #f0f0f0;
    border-collapse: collapse;
    width: 100%;
  }

  table.gridtable th {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #f0f0f0;
    background-color: #dedede;
  }

  table.gridtable td {
    border-width: 0.5px;
    border-style: solid;
    border-color: #d0d0d0;
    background-color: #ffffff;
    font-size: 15px;
    padding: 7px 10px !important;
  }
  .ant-tag-red {
    color: #ff4d4f; /* 文字颜色 */
    background: #fff1f0; /* 背景色 */
    border-color: #ffccc7; /* 边框颜色 */
  }
  .ant-tag-green {
    color: #52c41a; /* 文字颜色 */
    background: #f6ffed; /* 背景色 */
    border-color: #b7eb8f; /* 边框颜色 */
  }
  .ant-image-img{height: 100% !important;}
  .map-container {
    width: 100%;
    height: 800px;
  }
  #map .olLabel {
    font-size: 10px !important; /* 使用!important以覆盖已有的样式 */
  }
</style>
